<template>
	<view class="content">
		<view class="font_tip">
			<text style="margin-bottom: 26rpx;">仅用于系统审核</text>
			<text>请核对自动识别信息，若有误，请更正</text>
		</view>
		<view class="id_card">
			<view class="card_face">
				<image :src="imgSrcF" mode="" ></image>	
				<view class="card_text">
					<view class="text_a">
						<text>姓名</text>
						<input selection-start="6" type="text" value="" v-model="name"/>
					</view>
					<view class="text_a">
						
					</view>
					<view class="text_a">
						<text>身份证号</text>
						<input type="text" value="" v-model="cardNumber"/>
					</view>
				</view>
			</view>
			
			<view class="card_face">
				<image :src="imgSrcB" mode="" ></image>
				<view class="card_text">
					<view class="text_a">
						<text>签证机关</text>
						<input selection-start="6" type="text" value="" v-model="visaGrant"/>
					</view>
					<view class="text_a">
						
					</view>
					<view class="text_a">
						<text>有效日期</text>
						<input type="text" value="" v-model="validTime"/>
					</view>
				</view>
			</view>
		</view>
		<view class="ocr-btn">
			<button type="primary" @click="go_result">完成</button>
		</view>		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgSrcF: '../../static/img/cardResult/frontCard.png',
				imgSrcB: '../../static/img/cardResult/backCard.png',
				name:'',
				cardNumber:'',
				visaGrant:'',
				validTime:''
			}
		},
		methods: {
			go_result() { 
				
			}
			
		},
		onShow() {
			  
		},
		onLoad() {
			
		}
		
	}
</script>

<style lang="scss">
	.content {
		background-color: #F1EFF2;
		box-sizing: border-box;
	}
	.font_tip{
		display: flex;
		flex-direction: column;
		justify-content: center;
		font-size: 28rpx;
		color: #7c7c7c;
		padding-top: 30rpx;
		padding-bottom: 30rpx;
		padding-left: 30rpx;
		
	}
	.id_card{
		width: 100%;
		.card_face{
			display: flex;
			align-items: center;
			background-color: #FFFFFF;
			height: 320rpx;
			width: 100%;
			padding-left: 4%;
			image{
				width: 120rpx;
				height: 120rpx;
			}
			.card_text{	
				height: 180rpx;
				margin-left: 3.6%;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				.text_a{
					width: 100%;
					font-size: 36rpx;
					display: flex;
					text{
						color: #919191;
						margin-right: 30rpx;
					}	
				}
				.text_a:nth-child(1){
					text{
						margin-right: 104rpx;
					}
				}
				.text_a:nth-child(2){
					height: 1rpx;
					border-bottom: 1rpx solid #b8b8b8;
					padding-right: 46rpx;
				}
			}
			
		}
		.card_face:nth-child(2){
			margin-top: 3rpx;
			.text_a:nth-child(1){
				text{
					margin-right: 30rpx;
				}
				
			}
		}
	}
	.ocr-btn{
		padding-top: 30rpx;
		padding-bottom: 30rpx;	
		width: 100%;
		button {
			width: 80%;
			height: 84rpx;
			line-height: 84rpx;
			border-radius: 44rpx;
			font-size: 32rpx;
			background: linear-gradient(#e5b54e, #e5b54e);
		}
	}
</style>
